<template>
  <div class="waper_page" style="padding: 20px;">
    <div class="asideTopList">
      <TopNav :navList="navList" :itemNav="itemNav" @handleNav="handleNav"></TopNav>
      <div class="group">
        <div class="asideLeft">
          <AsideBox :asideList="asideList" :itemAside="itemAside" @handleAside="handleAside"></AsideBox>
        </div>
        <div class="listRight">
          <ListBox :dataList="dataList" :className="className" :itemList="itemList" @handleGoto="handleGoto"></ListBox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from '@/components/Widgets/topNav'
import AsideBox from '@/components/Widgets/asideBox'
import ListBox from '@/components/Widgets/listBox'
export default {
  components: { TopNav, AsideBox, ListBox },
  props: {},
  data() {
    return {
      // 顶部数据
      navList: [],
      itemNav: {},
      // 侧边栏数据
      asideList: [],
      itemAside: {},
      // 列表数据
      dataList: [],
      itemList: {},
      className: 'listImg6',// 6列：listImg6 5列：listImg5 4列：listImg4
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.getNavList();
    this.getAsideList();

  },
  updated() { },
  methods: {
    // 获取导航栏数据
    getNavList() {
      this.navList = [
        { title: '最近观看', code: '1211', },
        { title: '收藏', code: '1212', },
        { title: '搜索', code: '1213', },
        { title: '排行榜', code: '1214', },
        { title: '电影', code: '1215', },
        { title: '电视剧', code: '1216', },
      ];
      this.itemNav = this.navList.length > 0 ? this.navList[0] : {};
    },
    // 获取侧边栏数据
    getAsideList() {
      let data = [
        {
          ptitle: '最近观看', pcode: '1211',
          listData: [
            { title: '热播电影', code: '1110' },
            { title: '热播电视剧', code: '1111' },
            { title: '热播电视剧', code: '1111' },
            { title: '热播电视剧', code: '1111' },
            { title: '热播电视剧', code: '1111' },
            { title: '热搜电影', code: '1112' },
            { title: '热搜电视剧', code: '1113' },
            { title: '网评高分榜', code: '1114' },
            { title: '年度电影', code: '1115' },
            { title: '年度电影', code: '1115' },
            { title: '年度电影', code: '1115' },
            { title: '年度电影', code: '1115' },
            { title: '年度电影', code: '1115' },
            { title: '年度电影', code: '1115' },
            { title: '年度电影', code: '1115' },
          ]
        },
        {
          ptitle: '收藏', pcode: '1212',
          listData: []
        },
        {
          ptitle: '搜索', pcode: '1213',
          listData: []
        },
        {
          ptitle: '排行榜', pcode: '1214',
          listData: [
            { title: '热播电影', code: '1110' },
            { title: '热播电视剧', code: '1111' },
            { title: '热搜电影', code: '1112' },
            { title: '热搜电视剧', code: '1113' },
            { title: '网评高分榜', code: '1114' },
            { title: '年度电影', code: '1115' },
          ]
        },
        {
          ptitle: '电影', pcode: '1215',
          listData: [
            { title: '喜剧', code: '1210' },
            { title: '科幻', code: '1211' },
            { title: '动作', code: '1212' },
            { title: '爱情', code: '1213' },
            { title: '动画', code: '1214' },
          ]
        },
        {
          ptitle: '电视剧', pcode: '1216',
          listData: [
            { title: '军旅抗战', code: '1310' },
            { title: '古装历史', code: '1311' },
            { title: '都市是生活', code: '1312' },
            { title: '偶像爱情', code: '1313' },
            { title: '青春校园', code: '1314' },
          ]
        },
      ]
      data.forEach(item => {
        if (this.itemNav.code == item.pcode) {
          this.asideList = item.listData;
        }
      })
      this.itemAside = this.asideList.length > 0 ? this.asideList[0] : {};
      this.getListData();
    },
    // 获取列表数据
    getListData() {
      let listData = [
        {
          ptitle: '最近观看', pcode: '1211',
          asideTitle: '热播电影', asideCode: '1110',
          data: [
            { title: '哥，你好', code: '111011', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '平凡英雄', code: '111012', imgUrl: require('@/assets/img/r-2.jpg') },
            { title: '独行月球', code: '111013', imgUrl: require('@/assets/img/r-3.jpg') },
            { title: '阴阳画皮年少好滴哦好等哈搜狐都爱', code: '111014', imgUrl: require('@/assets/img/r-4.jpg') },
            { title: '一周的朋友', code: '111015', imgUrl: require('@/assets/img/r-5.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
          ]
        },
        {
          ptitle: '最近观看', pcode: '1211',
          asideTitle: '热播电视剧', asideCode: '1111',
          data: [
            { title: '爱的二八定律', code: '111111', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '我们的当打之年', code: '111112', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '你是我的荣耀', code: '111113', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '谢谢你医生', code: '111114', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '良辰美景好时光', code: '111115', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '陈情令', code: '111116', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
        {
          ptitle: '搜索', pcode: '1213',
          asideTitle: '', asideCode: '',
          data: []
        },
        {
          ptitle: '排行榜', pcode: '1214',
          asideTitle: '热播电影', asideCode: '1110',
          data: [
            { title: '哥，你好', code: '111011', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '平凡英雄', code: '111012', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '独行月球', code: '111013', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '阴阳画皮', code: '111014', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '一周的朋友', code: '111015', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
        {
          ptitle: '电影', pcode: '1215',
          asideTitle: '喜剧', asideCode: '1210',
          data: [
            { title: '喜剧', code: '1210', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '科幻', code: '1211', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '动作', code: '1212', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '爱情', code: '1213', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '动画', code: '1214', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
        {
          ptitle: '电视剧', pcode: '1216',
          asideTitle: '都市是生活', asideCode: '1312',
          data: [
            { title: '军旅抗战', code: '1310', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '古装历史', code: '1311', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '都市是生活', code: '1312', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '偶像爱情', code: '1313', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '青春校园', code: '1314', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
      ]


      let filter = (condition, data) => {
        return data.filter(item => {
          return Object.keys(condition).every(key => {
            return String(item[key]).toLowerCase().includes(String(condition[key]).trim().toLowerCase());
          })
        })
      }

      if (JSON.stringify(this.itemAside) != '{}') {
        let data = filter({ pcode: this.itemNav.code, asideCode: this.itemAside.code }, listData);
        this.dataList = data.length > 0 ? data[0].data : [];
      } else {
        this.dataList = [];
      }

      this.itemList = this.dataList.length > 0 ? this.dataList[0] : {};
    },
    // 切换顶部分类
    handleNav(item) {
      this.itemNav = item;
      this.getAsideList();
    },
    // 切换侧边栏分类
    handleAside(item) {
      this.itemAside = item;
      this.getListData();
    },
    // 跳转
    handleGoto(data) {
      console.log(data);
      this.itemList = data;
    }

  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.asideTopList {
  width: 1280px;
  height: 720px;
  background: url('../../assets/images/bg1.png');
  padding: 20px;

  .group {
    display: flex;
    flex-direction: row;
    height: calc(100% - 25px);

    .asideLeft {
      width: 260px;
      height: 100%;
    }

    .listRight {
      width: calc(100% - 260px);
      height: 100%;
    }
  }
}
</style>